<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-29 09:29:27
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-02-02 00:02:08
 * @FilePath: /tuberculosis_screening_app/src/pages/patient/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="page">
    <div class="search-bar">
      <div class="align-items_center">
        <div class="flex">
          <Select
            v-model="formState.province"
            class="select-card"
            is-link
            readonly
            :columns="divisions"
            placeholder="请选择省级地区"
          ></Select>
        </div>
        <div class="flex">
          <Select
            v-model="formState.city"
            class="select-card"
            is-link
            readonly
            :columns="cities"
            placeholder="请选择省级地区"
          ></Select>
        </div>
      </div>

      <div class="align-items_center">
        <div class="flex">
          <Select
            v-model="formState.county"
            class="select-card"
            is-link
            readonly
            :columns="areas"
            placeholder="请选择省级地区"
          ></Select>
        </div>
        <div class="flex">
          <Select
            v-model="formState.town"
            class="select-card"
            is-link
            readonly
            :columns="streets"
            placeholder="请选择省级地区"
          ></Select>
        </div>
      </div>

      <DateRange></DateRange>
    </div>

    <div class="p_default section pitch_default">
      <Card class="row" title="采集总人数：123" unit="人" color="#e0613e">
        <div class="grid column_3 divider">
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="有卡痕人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="无卡痕人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet class="grid-item p_xs" title="无症状人数" :count="150">
          </StatSheet>
        </div>

        <div class="grid column_2">
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="新增人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet class="grid-item p_xs" title="有症状人数" :count="150">
          </StatSheet>
        </div>
      </Card>
      <Card class="row" title="PPD注射总人数：123" unit="人" color="#3e6ce0">
        <div class="grid column_3 divider">
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="感染人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="未感染人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet class="grid-item p_xs" title="其中有水泡人数" :count="150">
          </StatSheet>
        </div>
      </Card>
      <Card class="row" title="DR筛查总人数：123" unit="人" color="#3ee0b2">
        <div class="grid column_2">
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="疑似结核人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet class="grid-item p_xs" title="无异常人数" :count="150">
          </StatSheet>
        </div>
      </Card>
      <Card class="row" title="CT筛查总人数：123" unit="人" color="#e0613e">
        <div class="grid column_2">
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="疑似结核人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet class="grid-item p_xs" title="无异常人数" :count="150">
          </StatSheet>
        </div>
      </Card>
      <Card class="row" title="实验室化验总人数：123" unit="人" color="#3e6ce0">
        <div class="grid column_3 divider">
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="谈涂片阳性人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="谈培养阳性人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet class="grid-item p_xs" title="药敏耐药人数" :count="150">
          </StatSheet>
        </div>

        <div class="grid column_2">
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="分子生物学阳性人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet class="grid-item p_xs" title="潜伏感染人数" :count="150">
          </StatSheet>
        </div>
      </Card>
      <Card class="row" title="诊断总人数：123" unit="人" color="#3ee0b2">
        <div class="grid column_2">
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="网报人数"
            :count="150"
          >
          </StatSheet>
          <StatSheet
            class="grid-item p_xs divider_vertical"
            title="病源学阳性人数"
            :count="150"
          >
          </StatSheet>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, watch, onMounted } from 'vue';
import PatientCard from '@/components/common/PatientCard.vue';
import { navigate } from '@/service/navigate';
import Select from '@/components/common/select.tsx';
import { Card, StatSheet, DateRange } from '@/components/common/index';
import pcasData from '@/divisions/pcas-code.json';

export default defineComponent({
  name: 'Center',
  components: {
    PatientCard,
    StatSheet,
    Select,
    Card,
    DateRange,
  },
  setup() {
    const formState = reactive({
      province: '',
      city: '',
      county: '',
      town: '',
    });
    const divisions = ref(
      pcasData.map(({ code, name, children }) => ({
        next: children,
        text: name,
        value: code,
      })) || []
    );
    const cities = ref([]);
    const areas = ref([]);
    const streets = ref([]);

    watch(
      () => formState.province,
      value => {
        formState.city = '';
        if (!value) {
          cities.value = [];
        } else {
          const result = divisions.value.find(item => item.value === value);
          cities.value =
            result.next.map(({ code, name, children }) => ({
              next: children,
              text: name,
              value: code,
            })) || [];
        }
        
      }
    );
    watch(
      () => formState.city,
      value => {
        formState.county = '';
        if (!value) {
          areas.value = [];
        } else {
          const result = cities.value.find(item => item.value === value);
          areas.value =
            result.next.map(({ code, name, children }) => ({
              next: children,
              text: name,
              value: code,
            })) || [];
        }
        
      }
    );
    watch(
      () => formState.county,
      value => {
        formState.town = '';
        if (!value) {
          streets.value = [];
        } else {
          const result = areas.value.find(item => item.value === value);
          streets.value =
            result.next.map(({ code, name, children }) => ({
              next: children,
              text: name,
              value: code,
            })) || [];
        }
        
      }
    );

    onMounted(() => {
      console.log('divisions.value', divisions.value);
    });

    return {
      navigate,
      formState,
      divisions,
      cities,
      areas,
      streets,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.page {
  background: #eeeeee;
}

.select-card {
  padding: 0;
  border-radius: map-get($spaces, sm);
}
.search-bar {
  background: $white-color;
}
.header {
  .heading {
    font-size: map-get($font-sizes, default);
    font-weight: bold;
    line-height: 1.8;
  }
  .count {
    font-size: map-get($font-sizes, lg);
    font-weight: bold;
    line-height: 1.8;
  }
}
</style>

